import { Image, Swiper, SwiperItem, View } from "@tarojs/components";
import SearchBar from "../SearchBar";
import { getCarousel } from "../../../../api/carousel";
import "./index.scss";
import { useEffect, useState } from "react";
import { ImageUrl } from "../../../../utils/request";
import Taro from "@tarojs/taro";
type ImageType = {
  carouselId: number;
  goodsId: number;
  picture: string;
};

export default () => {
  const [imageList, SetImageList] = useState<ImageType[]>();
  useEffect(() => {
    getCarousel().then(item => {
      SetImageList(item);
    });
  }, []);

  return (
    <View className="Wrapper">
      {/* <SearchBar /> */}
      <Swiper
        className="test-h"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots
        autoplay
      >
        {imageList &&
          imageList.map(item => {
            return (
              <SwiperItem key={item.goodsId}>
                <Image
                  src={ImageUrl + item.picture}
                  mode="widthFix"
                  onClick={() => {
                    Taro.redirectTo({
                      url: "/pages/detailpage/index?id=" + item.goodsId
                    });
                  }}
                />
              </SwiperItem>
            );
          })}
      </Swiper>
    </View>
  );
};
